<template>
	<view class="productList"  style="padding-top: 172rpx;">
		<view class="search acea-row row-between-wrapper" style="background-color: #9f2b45;">
			<view class="input acea-row row-between-wrapper">
				<input placeholder="搜索商品信息" v-model="where.keyword" />
				<text class="iconfont icon-sousuo" @click="submitForm"></text>
			</view>
		</view>
		<view class="nav acea-row row-middle">
			<view class="item" :class="title ? 'font-color-red' : ''" @click="set_where(0)">{{ title ? title : "分类" }}
				<image src="https://qny.yijiumy.com/horn.png" v-if="price === 0" />
			</view>
			<view class="item" @click="set_where(1)">
				价格
				<image src="https://qny.yijiumy.com/horn.png" v-if="price === 0" />
				<image src="https://qny.yijiumy.com/1855/up.png" v-if="price === 1" />
				<image src="https://qny.yijiumy.com/down.png" v-if="price === 2" />
			</view>
			<view class="item" @click="set_where(2)">
				销量
				<image src="https://qny.yijiumy.com/horn.png" v-if="stock === 0" />
				<image src="https://qny.yijiumy.com/1855/up.png" v-if="stock === 1" />
				<image src="https://qny.yijiumy.com/down.png" v-if="stock === 2" />
			</view>
			<view class="item" :class="nows ? 'font-color-red' : ''" @click="set_where(3)">新品</view>
		</view>
		
		<helang-waterfall-list :status="waterfall.status" ref="helangWaterfallList" :list="waterfall.list" :reset="waterfall.reset"
			@click="onClick" @done="onDone">
			<template>
				<view v-if="waterfall.status == 'await'">
					<view class="load-txt">上拉加载更多</view>
				</view>
				<view v-else-if="waterfall.status == 'loading'">
					<view class="load-txt">加载中</view>
				</view>
				<view v-else-if="waterfall.status == 'success'">
					<view class="load-txt">加载中</view>
				</view>
				<view v-else-if="waterfall.status == 'finish'">
					<view class="load-txt">没有更多了</view>
				</view>
				<view v-else-if="waterfall.status == 'fail'">
					<image class="load-icon" src="http://qny.yijiumy.com/fail-20240422200728.png"></image>
					<view class="load-txt">出错了，请刷新重试</view>
				</view>
				<view v-else-if="waterfall.status == 'empty'">
					<image class="load-icon" src="http://qny.yijiumy.com/empty-20240422200728.png"></image>
					<view class="load-txt">暂无数据</view>
				</view>
				<view v-else><!-- 别问我为什么要写一个 v-else 的空 view,不写H5平台就会有CSS生效的离谱BUG --></view>
			</template>
		</helang-waterfall-list>
	</view>
</template>

<script>
		import {
			getProducts
		} from "@/api/store";
		import {
			mapGetters
		} from "vuex";
		// import {
		// 	getCategory
		// } from "@/api/store";
	import helangWaterfallList from "@/uni_modules/helang-waterfall/components/waterfall/waterfall-list"

	export default {
		components: {
			"helang-waterfall-list": helangWaterfallList
		},
		data() {
			const s = "",
				id = 0,
				title = "";
			return {
				// 瀑布流组件相关
				waterfall: {
					status: "",
					reset: false,
					list: []
				},
				// category: [],
				Switch: true,
				where: {
					page: 1,
					limit: 8,
					keyword: s,
					sid: id, //二级分类id
					news: 0,
					priceOrder: "",
					salesOrder: "",
				},
				title: title && id ? title : "",
				price: 0,
				stock: 0,
				uid: '',
				nows: false,
				load: true,
			}
		},	watch: {
			title() {},
			$yroute(to) {}
		},
		mounted: function() {
			const {
				s = "", id = 0, title = ""
			} = this.$yroute.query;
			this.where.keyword = s;
			// this.loadCategoryData()
		},
	
		onReady() {
			this.getList();
		},
		// 触底触发
		onReachBottom() {
			this.getList();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.where.page = 1;
			this.load = true;
			this.getList();
		},
		methods: {
			// loadCategoryData() {
			// 	getCategory().then(res => {
			// 		this.category = [res.data, res.data[0].children];
			// 	});
			// },
			// 清空瀑布流数据
			clearData(){
				this.$refs.helangWaterfallList.resetData()
			},
			submitForm: function() {
				this.where.page = 1;
				this.clearData()
				this.getList();
			},
			// 点击事件处理
			set_where: function(index) {
				let that = this;
				switch (index) {
					case 0:
						return that.$yrouter.reLaunch({
							path: "/pages/launch/index",
							query: {
								type: 'GoodsList'
							}
						});
					case 1:
						if (that.price === 0) that.price = 1;
						else if (that.price === 1) that.price = 2;
						else if (that.price === 2) that.price = 0;
						that.stock = 0;
						break;
					case 2:
						if (that.stock === 0) that.stock = 1;
						else if (that.stock === 1) that.stock = 2;
						else if (that.stock === 2) that.stock = 0;
						that.price = 0;
						break;
					case 3:
						that.nows = !that.nows;
						break;
					default:
						break;
				}
				console.log('index',index)
				that.waterfall.list = [];
				that.clearData()
				that.where.page = 1;
				that.getList();
			},
			//设置where条件
			setWhere: function() {
				let that = this;
				if (that.price === 0) {
					that.where.priceOrder = "";
				} else if (that.price === 1) {
					that.where.priceOrder = "asc";
				} else if (that.price === 2) {
					that.where.priceOrder = "desc";
				}
				if (that.stock === 0) {
					that.where.salesOrder = "";
				} else if (that.stock === 1) {
					that.where.salesOrder = "asc";
				} else if (that.stock === 2) {
					that.where.salesOrder = "desc";
				}
				that.where.news = that.nows ? "1" : "0";
			},
			switchTap: function() {
				let that = this;
				that.Switch = !that.Switch;
			},
			// 瀑布流组件点击事件
			onClick(id) {
				this.$yrouter.push({
					path: '/pages/shop/GoodsCon/index',
					query: {
						id
					}
				});
			},
			// 瀑布流组件渲染完成
			onDone() {
				// 设置组件为 非重置，这行代码保留不删即可
				this.waterfall.reset = false;

				// 恢复 getList 方法的调用
				this.load = true;
				this.where.page++;

				// 设置组件状态为 等待加载
				this.waterfall.status = 'await';
			},
		
			
			
			// 获取数据
			getList() {
				if (!this.load) {
					return;
				}
				this.load = false;
				var that = this;
				this.setWhere();
				const {
					s = "", id = 0, title = ""
				} = this.$yroute.query;
				if (s !== this.where.keyword || id !== this.where.sid) {
					
					this.where.page = 1;
					this.where.sid = this.uid || id;
					this.title = title && id ? title : "";
					this.nows = false;
					this.price = 0;
					this.stock = 0;
				}
				
				// 设置状态为加载中
				this.waterfall.status = 'loading';

				getProducts(that.where).then((res) => {
					// 第一页数据执行以下代码
					if (that.where.page == 1) {
						// 关闭下拉
						uni.stopPullDownRefresh();
					
						// 设置组件状态为 重置，可供下拉刷新这类需要重置列表功能时使用
						this.waterfall.reset = true;
					}
					
					// 数据无效时处理
					if(!res || !res.data.length){
						// 设置组件为 加载结束 状态
						this.waterfall.status = 'finish';
						return;
					}
					
					// 将数据赋值给瀑布流 list 属性
					this.waterfall.list = res.data;
					// 设置组件为 加载成功 状态，此时瀑布流组件开始计算当前数据的布局
					this.waterfall.status = 'success';
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f3f3f3;
	}

	.load-txt {
		padding: 0 0 20rpx 0;
		text-align: center;
		color: #999;
		font-size: 24rpx;
	}

	.load-icon {
		width: 300rpx;
		height: 300rpx;
		margin: 0 auto 20rpx auto;
		display: block;
	}

	.status-change {
		position: fixed;
		right: 10rpx;
		top: 60%;
		width: 80rpx;
		height: 80rpx;
		z-index: 100;
		font-size: 24rpx;
		border-radius: 50%;
		background-color: #0089ff;
		color: #fff;
		line-height: 1;
		opacity: .33;

		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		align-items: center;
		align-content: center;
	}
</style>